<template>
  <div class="dynamic_params_layout">
    <el-table :id="tableIdName" :data="data.value" row-key="tempId" border>
      <slot></slot>

      <!-- 操作列 -->
      <el-table-column v-if="
        operation.move || operation.modify || operation.del || operation.check
      " label="操作" :width="columnWidth" align="center">
        <template #default="scope">
          <div class="rm_operation_layout">
            <div class="rm_operation_item">
              <el-icon class="move pointer" :size="18" v-if="operation.move">
                <Rank />
              </el-icon>
            </div>
            <div class="rm_operation_item">
                <el-icon class="copy pointer" @click="$emit('copy', scope.$index)" :size="18" v-if="operation.copy">
                  <CopyDocument />
                </el-icon>
              </div>
            <!-- <div class="divide" v-if="operation.move"></div> -->
            <div class="rm_operation_item">
              <el-icon class="pointer" @click="$emit('modify', scope.$index)" :size="18" v-if="operation.modify">
                <Edit />
              </el-icon>
            </div>
            <!-- <div class="divide" v-if="operation.modify"></div> -->
            <div class="rm_operation_item">
              <el-icon class="pointer" @click="delOperation(scope.$index)" v-if="operation.del" :size="18">
                <Delete />
              </el-icon>
            </div>
            <div class="rm_operation_item">
              <el-button size="small" type="primary" text v-if="operation.check" @click="$emit('check', scope.$index)">
                查看
              </el-button>
            </div>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="dashed_but" @click="add" v-if="operation.add && !multipleType">
      {{ addText }}
    </div>
    <div v-if="!operation.add && multipleType" class="add_layout">
      <div class="dashed_but" @click="addType1">
        {{ multipleAddText[0] }}
      </div>
      <div class="dashed_but" @click="addType2">
        {{ multipleAddText[1] }}
      </div>
      <div class="dashed_but" @click="addType3">
        {{ multipleAddText[2] }}
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  defineProps,
  defineEmits,
  reactive,
  defineExpose,
  watch,
  onBeforeUnmount,
} from "vue";
import { onMounted } from "vue";
import $ from "@util/base";
import Sortable from "sortablejs";
import { Delete, Edit, Rank, CopyDocument } from "@element-plus/icons-vue";

const emit = defineEmits(["add", "check", "modify", "delete", "move"]);
const props = defineProps({
  template: { type: Object },
  data: { type: Array },
  multipleType: { type: Boolean, default: false },
  showDefault: { type: Boolean, default: true },
  operation: {
    type: Object,
    default: () => {
      return {
        copy:false,
        move: false,
        modify: false,
        del: false,
        add: false,
        check: false,
      };
    },
  },
  addText: { type: String, default: "添加选项" },
  multipleAddText: {
    type: Array,
    default: () => ["添加选项", "添加选项", "添加选项"],
  },
  customAdd: { type: Boolean, default: false },
  customDel: { type: Boolean, default: false },
  customMove: { type: Boolean, default: false },
  typeProp: String,
  type1Code: String,
  type2Code: String,
  type3Code: String,
});
const tableIdName = "params-" + $.uuid8();

var columnWidth = 30;
for (const key in props.operation) {
  if (props.operation[key] && key != "add") {
    columnWidth += 30;
  }
}

watch(
  () => props.data,
  () => {
    data.value = defaultData();
    sortData.value = data.value;
  }
);
function defaultData() {
  let dataNotEmpty = $.isNotEmpty(props.data);
  return props.showDefault || dataNotEmpty
    ? dataNotEmpty
      ? props.data.map((e) => {
        e.tempId = $.uuid8();
        return e;
      })
      : [templateData()]
    : [];
}
const data = reactive({ value: defaultData() });

function delOperation(index) {
  if (props.customDel) {
    emit("delete", index);
  } else {
    data.value.splice(index, 1);
  }
}
function templateData() {
  let addData = { tempId: $.uuid8() };
  let template = $.deepCopy(props.template || props.data[0]);
  for (let key in template) {
    addData[key] = template[key];
  }
  return addData;
}

function add() {
  if (props.customAdd) {
    emit("add");
  } else {
    addData(templateData());
  }
}

function addType1() {
  let data = templateData();
  data[props.typeProp] = props.type1Code;
  addData(data);
}

function addType2() {
  let data = templateData();
  data[props.typeProp] = props.type2Code;
  addData(data);
}
function addType3() {
  let data = templateData();
  data[props.typeProp] = props.type3Code;
  addData(data);
}
function addData(val) {
  val.tempId = $.uuid8();
  data.value.push(val);
}
function setData(val) {
  if ($.isEmpty(val)) {
    data.value = defaultData();
  } else {
    data.value = val;
  }
  sortData.value = data.value;
}
function modifyData(index, val) {
  data.value[index] = val;
}
function clear() {
  data.value = defaultData();
  sortData.value = data.value;
}
function getValue() {
  return $.deepCopy(data.value);
}
function getReactiveValue() {
  return data.value;
}

const sortData = reactive({ value: data.value });
var sortable = null;
onMounted(() => {
  if (props.operation.move) {
    const table = document.querySelector(
      "#" + tableIdName + " .el-table__body-wrapper tbody"
    );

    sortable = Sortable.create(table, {
      handle: ".move",
      animation: 150,
      onEnd: function (evt) {
        const currRow = sortData.value.splice(evt.oldIndex, 1)[0];
        sortData.value.splice(evt.newIndex, 0, currRow);
        if (props.customMove) {
          emit("move", sortData.value);
        }
      },
    });
  }
});
onBeforeUnmount(() => {
  if (sortable) {
    sortable.destroy();
  }
});
defineExpose({
  getValue,
  getReactiveValue,
  addData,
  setData,
  modifyData,
  clear,
});
</script>
<style lang="scss">
.rm_operation_layout {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
}

.row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.divide {
  width: 1px;
  height: 18px;
  background-color: #606266;
  margin: 0 12px;
}

.add_layout {
  display: flex;

  div {
    width: 100%;
  }
}

.dynamic_params_layout {
  .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: rgba(0, 0, 0, 0) !important;
  }
}
</style>
